<template>
	<view class="my-invite" ref="uv-back-top">
		<headers></headers>
		<el-container>
			<el-aside class="hidden-sm-and-down" width="500px">
				<my :heads="false"></my>
			</el-aside>
			<el-main>
				<view class="feedback-form">
					<view class="form-item">
						<text class="form-label">用户名:</text>
						<input class="form-input" v-model="feedback.username" placeholder="输入您的用户名" />
					</view>
					<view class="form-item">
						<text class="form-label">电话:</text>
						<input class="form-input" v-model="feedback.phone" placeholder="输入您的电话号码" />
					</view>
					<view class="form-item">
						<text class="form-label">电子邮件:</text>
						<input class="form-input" v-model="feedback.email" placeholder="输入您的电子邮件" />
					</view>
					<view class="form-item" style="width: 100%;">
						<text class="form-label">反馈意见（必填）:</text>
						<textarea class="feedback-textarea" v-model="feedback.content" placeholder="输入您的反馈" />
					</view>
					<button @click="submitFeedback" class="submit-button">提交反馈</button>
				</view>
			</el-main>
		</el-container>
		<uv-navbar v-if="!screen" :title="'反 馈'" @leftClick="navigateBack" :placeholder="true"></uv-navbar>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import my from '@/pages/my/index';
	import headers from '@/components/header/header.vue';
	import config from '@/common/config'
	import {
		feedback,
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			my,
			headers,
		},
		data() {
			return {
				feedback: {
					username: '',
					email: '',
					content: ''
				}
			};
		},
		methods: {
			async submitFeedback() {
				this.feedback.userId = this.vuex_user?._id;
				if (!this.feedback.content) {
					return uni.showToast({
						title: '没有反馈内容，你反馈它干嘛！',
						icon: 'none'
					});
				}
				feedback(this.feedback, {
					custom: {
						auth: true,
						toast: true,
					},
				}).then(e => {
					// console.log(e);
					uni.showToast({
						title: '反馈提交成功',
						icon: 'success'
					});
					this.feedback.username = '';
					this.feedback.email = '';
					this.feedback.content = '';
				}).catch(err => {
					console.error(err);
					uni.showToast({
						title: '反馈提交失败',
						icon: 'none'
					});
				})
			}
		}
	};
</script>

<style>
	.feedback-form {
		background-color: #f5f5f5;
		border-radius: 10px;
		padding: 20px;
	}

	.form-item {
		margin-bottom: 15px;
	}

	.form-label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.form-input,
	.feedback-textarea {
		width: auto;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.feedback-textarea {
		height: 100px;
	}

	.submit-button {
		background-color: #007aff;
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
</style>